iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
3
Modern Web

從Stack Overflow學前端系列 第 30

從StackOverflow上學CODING(30)用 jQuery預載圖片

  • 分享至 

  • xImage
  •  

Preloading images with jQuery

I'm looking for a quick and easy way to preload images with JavaScript. I'm using jQuery if that's important.
I saw this here (http://nettuts.com...):

我再找快速方便的方式來預載圖片,我主要是用jQuery如果這重要的話

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

But, it looks a bit over-the-top for what I want!
I know there are jQuery plugins out there that do this but they all seem a bit big (in size); I just need a quick, easy and short way of preloading images!

但是這個感覺有點太過頭太多了一點,
我知道有一些jQuery插件可以做得到,但是他們都感覺有點太大,我想找更快速簡潔的方式


Quick and easy:

快速簡潔:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}
// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Or, if you want a jQuery plugin:

如果你享用jQuery插件的話:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

上一篇
從StackOverflow上學CODING(29) 如何監聽判斷enter鍵?
系列文
從Stack Overflow學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-03-01 10:33:39

恭喜完賽!

我要留言

立即登入留言